<template>
  <div class="tree">
    <div class="root-node">
      <div class="node-content">
        <div class="node-icon">
          <i class="el-icon-s-data"></i>
        </div>
        <div class="node-info">
          <div class="node-title">{{ treeData.name }}</div>
          <div class="node-subtitle">对冲单</div>
        </div>
        <div class="node-status">
          <el-tag type="success" size="mini">活跃</el-tag>
        </div>
      </div>
    </div>
    <div class="horizontal-line" :class="{ 'line-end': !hasChildren }"></div>

    <!-- <div class="connection-line" v-if="treeData.children.length > 0">
      <div class="line-main"></div>
      <div class="line-branches">
        <div 
          v-for="(item, index) in treeData.children" 
          :key="index"
          class="branch-line"
          :style="{ '--index': index, '--total': treeData.children.length }"
        ></div>
      </div>
    </div> -->
    <div class="child-box">
      <Child
        style="flex: 1"
        v-for="(item, index) in treeData.children"
        :key="item.id"
        :treeData="item"
        :isFirst="index == 0"
        :isLast="index == treeData.children.length - 1"
      />
    </div>
  </div>
</template>

<script>
import Child from "./child.vue";
export default {
  name: "Tree",
  components: {
    Child,
  },
  props: {
    treeData: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    hasChildren() {
      return this.treeData.children && this.treeData.children.length;
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.tree {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: 300px;
  position: relative;
  .horizontal-line {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, #c3cfe2, #f5f7fa);
    border-radius: 1px;
    margin: 0 20px;
    position: relative;
    z-index: 2;
    margin-top: 20px;

    &.line-end {
      flex: 1;
    }

    &::after {
      content: "";
      position: absolute;
      right: -4px;
      top: -3px;
      width: 8px;
      height: 8px;
      background: #f5f7fa;
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(245, 247, 250, 0.5);
    }
  }

  .root-node {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
    }

    .node-content {
      display: flex;
      align-items: center;
      gap: 16px;
      color: white;

      .node-icon {
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        backdrop-filter: blur(10px);
      }

      .node-info {
        flex: 1;

        .node-title {
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 4px;
        }

        .node-subtitle {
          font-size: 14px;
          opacity: 0.8;
        }
      }

      .node-status {
        .el-tag {
          background: rgba(255, 255, 255, 0.2);
          border: 1px solid rgba(255, 255, 255, 0.3);
          color: white;
          backdrop-filter: blur(10px);
        }
      }
    }
  }

  .connection-line {
    position: relative;
    width: 120px;
    height: 2px;
    margin: 0 20px;
    z-index: 5;

    .line-main {
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, #667eea, #764ba2);
      border-radius: 1px;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        right: -4px;
        top: -3px;
        width: 8px;
        height: 8px;
        background: #764ba2;
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(118, 75, 162, 0.5);
      }
    }

    .line-branches {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 100px;

      .branch-line {
        position: absolute;
        width: 2px;
        height: 60px;
        background: linear-gradient(180deg, #764ba2, #c3cfe2);
        border-radius: 1px;
        top: 0;
        left: calc(50% + var(--index) * 20px - var(--total) * 10px);
        transform-origin: top;
        animation: branchGrow 0.8s ease-out calc(var(--index) * 0.1s) both;

        &::after {
          content: "";
          position: absolute;
          bottom: -4px;
          left: -3px;
          width: 8px;
          height: 8px;
          background: #c3cfe2;
          border-radius: 50%;
          box-shadow: 0 0 8px rgba(195, 207, 226, 0.5);
        }
      }
    }
  }

  .child-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* padding-top: 20px; */
    /* border-left: 2px solid; */
    margin-top: 20px;
    
  }
}

@keyframes branchGrow {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 60px;
    opacity: 1;
  }
}
</style>
